<template>
  <div v-if="show">
    <el-dialog
      title=""
      :visible.sync="show"
      width="30%"
      @close="handleClose"
    >
      <div class="videoBox">
        <!-- /page/video.html -->
        <iframe :src="'/page/video.html?url=' + videoSrc" frameborder="0" width="500" height="300" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'videoDialog',
  props: {
    videoFlag: {
      type: Boolean,
      default: false
    },
    videoSrc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false
    }
  },
  created() {
    this.show = this.videoFlag
  },
  methods: {
    handleClose() {
      this.show = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep.el-dialog{
    /*background-image: radial-gradient(rgb(3,11,33),rgb(12,19,51))  !important;*/
    background: transparent!important;
    box-shadow: none!important;
  }
  .videoBox{
    height: 300px;
    width: 300px;
  }
</style>
